<template>
    <el-form :model="props.dialogForm" label-width="auto" class="agency-form">
        <span class="title">机构主体信息</span>
        <div class="form-content">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="机构logo:" prop="agencyLogo">
                        <el-upload 
                            ref="upload1"
                            class="avatar-uploader" 
                            :action="fileUrl" 
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess" 
                            :before-upload="beforeAvatarUpload"
                            :on-error="handleAvatarError" 
                            :limit="1"
                            @click="handleClick(0)"
                        >
                            <el-image v-if="props.dialogForm.agencyLogo" :src="imageUrl + props.dialogForm.agencyLogo" style="width: 100px; height: 100px;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="机构名称:" prop="agencyName">
                        <el-input v-model="dialogForm.agencyName" placeholder="请输入机构名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构邮箱:" prop="orgEmail">
                        <el-input v-model="dialogForm.agencyEmail" placeholder="请输入机构邮箱" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构电话:" prop="agencyPhone">
                        <el-input v-model="dialogForm.agencyPhone" placeholder="请输入机构电话" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="机构成立时间:" prop="agencyStartTime">
                        <el-date-picker v-model="dialogForm.agencyStartTime" type="date" placeholder="请选择机构成立时间" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构官网:" prop="agencyWebsite">
                        <el-input v-model="dialogForm.agencyWebsite" placeholder="请输入机构官网" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构传真:" prop="agencyFax">
                        <el-input v-model="dialogForm.agencyFax" placeholder="请输入机构传真" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="登记管理机关:" prop="registrationAdministrationAuthority">
                        <el-input v-model="dialogForm.registrationAdministrationAuthority" placeholder="如xx省民政厅" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="组织评级:" prop="organizationRating">
                        <el-cascader v-model="dialogForm.organizationRating" :options="ratingList" placeholder="请选择组织评级" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构性质:" prop="agencyNature">
                        <el-select v-model="dialogForm.agencyNature" placeholder="请选择机构性质" clearable>
                            <el-option v-for="item in agencyNatureList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="专职人员人数:" prop="staffsNumber">
                        <el-input v-model="dialogForm.staffsNumber" placeholder="请输入专职人员人数" type="number" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="兼职和志愿者人数:" prop="volunteersNumber">
                        <el-input v-model="dialogForm.volunteersNumber" placeholder="请输入兼职和志愿者人数" type="number" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="登录密码:" prop="agencyPassword">
                        <el-input v-model="dialogForm.agencyPassword" placeholder="请输入登录密码" type="password" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="机构地址:" prop="agencyAddress">
                        <el-input v-model="dialogForm.agencyAddress" type="textarea" placeholder="请输入机构地址" :autosize="{ minRows: 4, maxRows: 4 }" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <span class="title">机构法人信息</span>
        <div class="form-content">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="法人姓名:" prop="corporateName">
                        <el-input v-model="dialogForm.corporateName" placeholder="请输入法人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="法人身份证号:" prop="corporateId">
                        <el-input v-model="dialogForm.corporateId" placeholder="请输入法人身份证号" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <span class="title">机构证件信息</span>
        <div class="form-content">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="统一社会信用代码:" prop="socialCreditCode">
                        <el-input v-model="dialogForm.socialCreditCode" placeholder="请输入统一社会信用代码" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="登记证书类型:" prop="registrationCertificateType">
                        <el-select v-model="dialogForm.registrationCertificateType" placeholder="请选择登记证书类型" clearable>
                            <el-option v-for="item in registrationCertificateTypeList" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="登记证书扫描件/照片:" prop="registrationCertificatePhoto">
                        <el-upload 
                            ref="upload2"
                            class="avatar-uploader" 
                            :action="fileUrl" 
                            :show-file-list="false" 
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload" 
                            :on-error="handleAvatarError"
                            :limit="1"
                            @click="handleClick(1)"
                        >
                            <el-image v-if="props.dialogForm.registrationCertificatePhoto" :src="imageUrl + props.dialogForm.registrationCertificatePhoto" style="width: 100px; height: 100px;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="证书有效期起止时间:" prop="certificateTimes">
                        <el-switch inactive-text="长期" v-model="dialogForm.orgLegalIdCardIsLongTerm"
                            prop="orgLegalIdCardIsLongTerm" />
                        <div v-show="!dialogForm.orgLegalIdCardIsLongTerm" class="date-range">
                            <el-date-picker v-model="dialogForm.certificateTimes" type="daterange"
                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </div>
                        <div v-show="dialogForm.orgLegalIdCardIsLongTerm" class="date-range">
                            <el-date-picker v-model="dialogForm.certificateTimes" type="date"
                                placeholder="请选择起始有效期" />
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="登记证书注册地址:" prop="registrationCertificateAddress">
                        <el-cascader v-model="dialogForm.address" :options="addressList" placeholder="请选择注册地址" />
                        <el-input v-model="dialogForm.registrationCertificateAddress" placeholder="请输入登记证书扫描件/照片上的详细地址" style="width: 400px;" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <span class="title">机构业务信息</span>
        <div class="form-content">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="机构简介:" prop="agencyIntroduction">
                        <el-input v-model="dialogForm.agencyIntroduction" type="textarea" placeholder="请输入机构简介"
                            :autosize="{ minRows: 4, maxRows: 4 }" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="业务范围:" prop="bussinessScope">
                        <el-input v-model="dialogForm.bussinessScope" type="textarea"
                            placeholder="根据注册类型填写业务场景描述，和登记证书扫描/照片上的信息保持一致" :autosize="{ minRows: 4, maxRows: 4 }" />
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
import { UploadInstance, UploadProps } from 'element-plus';
import { fileUrl, imageUrl } from '../../api/request';
import { handleAvatarError, beforeAvatarUpload, ratingList, agencyNatureList, registrationCertificateTypeList, addressList } from './ts/common';
import { Plus } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';

// 接收父组件传值
const props = defineProps(["dialogForm"]);
const nowClickIndex = ref(0);
const upload1 = ref<UploadInstance>();
const upload2 = ref<UploadInstance>();

/** 上传图片成功 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (res: any) => {
    if (nowClickIndex.value === 0) {
        props.dialogForm.agencyLogo = res;
        upload1.value!.clearFiles(); // 清除已上传文件
    } else {
        props.dialogForm.registrationCertificatePhoto = res;
        upload2.value!.clearFiles(); // 清除已上传文件
    }
};

/** 判断是哪个按钮触发的上传事件 */
const handleClick = (index: number) => {
    nowClickIndex.value = index;
}
</script>

<style lang="less">
.agency-form {
    max-height: 100%;
    overflow-y: auto;

    .title {
        font-size: 15px;
        font-weight: bold;
        border-left: #3c89d4 5px solid;
        padding-left: 5px;
    }

    .form-content {
        margin-top: 10px;

        .avatar-uploader {
            width: 100px;
            height: 100px;
            display: block;
            border: 1px dashed gray;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);

            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 100px;
                height: 100px;
                text-align: center;
            }
        }

        .avatar-uploader:hover {
            border-color: var(--el-color-primary);
        }

        .el-input,
        .el-select {
            width: 220px;
        }

        .date-range {
            margin-left: 10px;
        }

        .el-switch__label.is-active {
            color: var(--el-text-color-primary);
        }

        .el-switch__label {
            color: var(--el-color-primary)
        }

        .el-upload-dragger {
            height: 50px;
            background-color: gainsboro;
            display: flex;
            align-items: center;
        }
    }
}
</style>